<template>
  <div>
    <div @click="onSelectNextUsers()" style="cursor: pointer">
      <el-input :disabled="disabled" v-model="currentRow.nickName" readonly :placeholder="placeholder"><i
          v-if="currentRow.nickName && !disabled" slot="suffix" @click.stop="clickIcon"
          class="el-input__icon el-icon-circle-close"></i></el-input>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-row type="flex" :gutter="20">
        <!--部门数据-->
        <el-col :span="5">
          <el-card shadow="never" style="height: 100%">
            <div slot="header">
              <span>部门列表</span>
            </div>
            <div class="head-container">
              <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" />
              <el-tree :current-node-key="100" highlight-current :data="deptOptions" :props="deptProps"
                :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all
                @node-click="handleNodeClick" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-form :model="queryParams1" ref="queryForm" size="small" :inline="true">
            <el-form-item label="姓名" prop="nickName">
              <el-input v-model="queryParams1.nickName" placeholder="请输入用户名称" clearable style="width: 240px"
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="手机号" prop="phonenumber">
              <el-input v-model="queryParams1.phonenumber" placeholder="请输入用户手机号" clearable style="width: 240px"
                @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table ref="userTable" height="500" v-loading="userLoading" :data="userList" highlight-current-row
            @current-change="changeCurrentUser">
            <!-- <el-table-column width="55" type="selection" /> -->

            <el-table-column label="用户名" align="center" prop="nickName" />
            <el-table-column label="手机" align="center" prop="phonenumber" />
            <el-table-column label="部门" align="center" prop="dept.deptName" />
          </el-table>
          <pagination :total="total" :page.sync="queryParams1.pageNum" :limit.sync="queryParams1.pageSize"
            @pagination="getListUser" />
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="submitUserData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { selectUser, deptTreeSelect } from "@/api/system/user";
import { listDocBase } from "@/api/finance/personnel/file.js"
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    value: [String, Object, Array, Number],
    placeholder: {
      type: String,
      default: "请检索员工",
    },
    typeValue: {
      type: String,
      default: "",
    },
    becomeShow: {
      type: Boolean,
      default: false,
    },
    flag: {
      type: Number,
      default: null
    },
    status: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      deptProps: {
        children: "children",
        label: "label",
      },
      open: false,
      title: "人员检索",
      deptOptions: [],
      userLoading: false,
      queryParams1: {
        nickName: "",
        phonenumber: "",
        deptId: undefined,
        pageSize: 10,
      },
      userMultipleSelection: [],
      // 部门名称
      deptName: undefined,
      userList: [],
      currentRow: {
        nickName: "",
      },
      total: "",
    };
  },
  watch: {
    value: {
      handler(val) {
        this.currentUserId = val;
        this.checkRow();
        if (!val) this.clickIcon();
      },
      deep: true,
      immediate: true,
    },
    typeValue: {
      handler(val) {
        this.queryParams1.deptId = val;
      },
      deep: true,
      immediate: true,
    },
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {
    this.getListUserFrist();
    this.getListUser(true);
  },
  methods: {
    handleQuery() {
      this.queryParams1.pageNum = 1;
      this.getListUser();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查询部门下拉树结构 */
    getTreeSelect() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
        this.$nextTick(() => {
          console.log(this.$refs);
          this.$refs.tree.setCurrentKey(this.typeValue, true);
        });
      });
    },
    onSelectNextUsers() {
      if (this.disabled) return;
      this.onSelectUsers("人员");
    },
    onSelectUsers(title) {
      this.open = true;

      this.getTreeSelect();
      this.getListUser();
    },

    /** 查询用户列表 */
    getListUser(e) {
      if (this.becomeShow == true) {
        // this.queryParams1.status = this.status
        // this.queryParams1.pageNum = 1
        // this.queryParams1.person = 0
        // this.queryParams1.flag = this.flag
        listDocBase(
          this.addDateRangeTime(
            this.queryParams1,
          )
        ).then((response) => {
          this.$nextTick(() => {
            response.rows.forEach(item => {
              item.phonenumber = item.phone
              item.dept = {
                deptName: item.join.deptName,
                deptId: item.join.deptId
              }
            });
          })
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
          if (!e) {
            this.checkRow();
          }
        });
      } else {
        // this.userLoading = true;
        selectUser(this.queryParams1).then((response) => {
          this.userLoading = false;
          this.userList = response.rows;
          this.total = response.total;
          if (!e) {
            this.checkRow();
          }
        });
      }

    },
    getListUserFrist() {
      if (this.becomeShow) {
        this.queryParams1.status = this.status
        this.queryParams1.pageNum = 1
        this.queryParams1.person = 0
        this.queryParams1.flag = this.flag
        listDocBase(
          this.queryParams1,
        ).then((response) => {
          this.$nextTick(() => {
            response.rows.forEach(item => {
              item.phonenumber = item.phone
              item.dept = {
                deptName: item.join.deptName,
                deptId: item.join.deptId
              }
            });
          })

          this.checkRow(response.rows);
        })
      } else {
        selectUser().then((response) => {
          this.checkRow(response.rows);
        });
      }

    },
    checkRow(list) {
      if (this.becomeShow) {
        // this.currentRow = list
        // if (!this.currentRow) {
        //     this.currentRow = {
        //       nickName: "",
        //     };
        //   }
        this.$emit("change", this.currentRow);
          this.toggleSelection(this.currentRow);
      } else {
        if (list && list.length) {
          this.currentRow = list.find((k) => k.userId == this.value);
          if (!this.currentRow) {
            this.currentRow = {
              nickName: "",
            };
          }
          this.$emit("change", this.currentRow);
          this.toggleSelection(this.currentRow);
        } else if (this.value && this.userList.length) {
          this.currentRow = this.userList.find((k) => k.userId == this.value);
          if (!this.currentRow) {
            this.currentRow = {
              nickName: "",
            };
          }
          this.$emit("change", this.currentRow);
          this.toggleSelection(this.currentRow);
        }
      }
    },
    clickIcon(e) {
      (this.currentRow = {
        nickName: "",
      }),
        (this.currentUserId = "");
      this.$emit("change", this.currentRow);
      this.$emit("input", this.currentUserId);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (this.typeValue) {
        this.$modal.msgWarning("只能选择当前部门");
        return;
      }
      this.queryParams1.deptId = data.id;
      this.onSelectUsers();
    },
    changeCurrentUser(val) {
      this.currentUserId = this.becomeShow ? val.userDocBaseId : val.userId;
      // this.currentUserId = val.userId;
    },
    toggleSelection(selection) {
      if (selection) {
        this.$nextTick(() => {
          this.$refs.userTable && this.$refs.userTable.setCurrentRow(selection);
        });
      } else {
        this.$nextTick(() => {
          // this.$refs.userTable.clearSelection();
        });
      }
    },
    submitUserData() {
      if (!this.currentUserId) {
        this.$modal.msgError("请选择人员");
        return false;
      }
      if (this.becomeShow) {
        this.currentRow = this.userList.find(
          (k) => k.userDocBaseId === this.currentUserId
        );
      } else {
        this.currentRow = this.userList.find(
          (k) => k.userId === this.currentUserId
        );
      }

      this.$emit("change", this.currentRow);
      this.$emit("input", this.currentUserId);
      this.open = false;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
  cursor: pointer;
}
</style>
